<template>
  <div id="total">
    <div id="title">
      <!-- 左边文字 -->
      <div id="left">
        <span id="blue">诊断信息&nbsp;&nbsp;</span>
        <span id="gray">诊断编号:&nbsp;&nbsp;</span>
        <span v-if="recordsRef.recordsId" id="gray">{{recordsRef.recordsId}}</span>
        <span v-else id="gray">未生成</span>
      </div>
      <!-- 右边文字 -->
      <div id="right">
        <span id="red">未收费</span>
      </div>
    </div>
    <div id="second">
      <!-- 日期 -->
      <div id="date">
        <!-- 日期选择器 -->
        <div class="demo-date-picker">
          <div class="block">
            <span id="innerThree" class="demonstration"
              >发病日期:&nbsp;&nbsp;</span
            >
            <el-date-picker
              v-model="recordsRef.recordsTime"
              type="date"
              placeholder="请选择挂号日期"
            />
          </div>
        </div>
      </div>
      <!-- 接诊类型 -->
      <div id="g">
        <span id="innerThree">挂号类别:&nbsp;&nbsp;</span>
        <!-- 选择器 -->
        <el-select v-model="recordsRef.recordType" class="m-2" placeholder="初诊">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 是否传染 -->
      <div id="g">
        <span id="innerThree">是否传染:&nbsp;&nbsp;</span>
        <!-- 选择器 -->
        <el-select v-model="recordsRef.infect" class="m-2" placeholder="不是">
          <el-option
            v-for="item in optionsOne"
            :key="item.value1"
            :label="item.label1"
            :value="item.value1"
          />
        </el-select>
      </div>
    </div>
    <div id="form" >
      <!-- 第一排 -->
      <div>
        <div id="firstLine">
          <span id="grayOne">主述:</span>
        </div>
        <div id="box">
          <el-form-item label="">
            <el-input
              placeholder="填写主述病状(限500字)"
              v-model="recordsRef.mainSuit"
              type="textarea"
              @blur="updateData"
            />
          </el-form-item>
        </div>
      </div>
      <!-- 第二排 -->
      <div>
        <div id="firstLine">
          <span id="blue">诊断详情:</span>
        </div>
        <div id="box">
          <el-form-item label="">
            <el-input
              placeholder="填写本次诊断详情(限500字)"
              v-model="recordsRef.message"
              type="textarea"
              @blur="updateData"
            />
          </el-form-item>
        </div>
      </div>
      <!-- 第三排 -->
      <div>
        <div id="firstLine">
          <span id="blue">医生建议:</span>
        </div>
        <div id="box">
          <el-form-item label="">
            <el-input
              placeholder="填写医生建议(限500字)"
              v-model="recordsRef.docterSuggest"
              type="textarea"
              @blur="updateData"
            />
          </el-form-item>
        </div>
      </div>
      <!-- 第四排 -->
      <div>
        <div id="firstLine">
          <span id="blue">备注:</span>
        </div>
        <div id="box">
          <el-form-item label="">
            <el-input
              placeholder="填写备注(限500字)"
              v-model="recordsRef.remarks"
              type="textarea"
              @blur="updateData"
            />
          </el-form-item>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onUpdated } from "vue";
import { useStore, mapGetters } from "vuex";
const store = useStore();  
  const getRecordsRef = computed(mapGetters(["getRecordsRef"]).getRecordsRef.bind({$store: store,}))
// 挂号
const options = [
  {
    value: "初诊",
    label: "初诊",
  },
  {
    value: "复诊",
    label: "复诊",
  },
  {
    value: "急诊",
    label: "急诊",
  },
];
const optionsOne = [
  {
    value1: "0",
    label1: "不是",
  },
  {
    value1: "1",
    label1: "是",
  },
];
const recordsRef = ref(getRecordsRef.value)
onUpdated(()=>{
  updateData()
  
})
const emit = defineEmits(["submitData"])
const updateData = ()=>{
  emit("submitData",recordsRef)
}

</script>
<style scoped>
#blue {
  color: #429bff;
}
#firstLine {
  height: 35px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
}
.el-form-item {
  margin-top: 15px;
}
#box {
  height: 70px;
}
#second {
  display: flex;
  align-items: center;
  height: 50px;
}
#g {
  margin-left: 20px;
}
#total {
  display: flex;
  
}
#title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #adacac;
  border-bottom: 1px solid #dcdfe6;
  width: 100%;
  height: 50px;
}
#blue {
  color: #429bff;
}
#gray {
  color: #999999;
}
#red {
  color: #fd6666;
}
#grayOne {
  color: #676a6d;
}
#innerThree {
  color: #676a6d;
}
</style>
